<template>
  <div>
    <!-- 输入框部分 -->
    <el-row class="dis" type="flex" align="middle">
      <el-input
        @keyup.enter.native="citySeek"
        placeholder="请输入你想去的地方 比如  '广州'"
        v-model="input"
      ></el-input>
      <i @click="citySeek" class="el-icon-search"></i>
    </el-row>
    <!-- 推荐 -->
    <el-row>
      <el-col :span="24" class="tuijian">
        <span>推荐</span>
        <div v-for="(value, index) in ['广州', '上海', '北京']" :key="index">
          <span @click="recommend(value)">{{ value }}</span>
        </div>
      </el-col>
    </el-row>
    <!-- 推荐攻略 -->
    <el-row>
      <el-col class="gonglue" :span="24">
        <h3>推荐攻略</h3>
        <el-button type="primary" icon="el-icon-edit">写游记</el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <div>
      <div v-for="(item, index) in data" :key="index">
        <!-- 三张以上的图片显示 -->
        <nuxt-link :to="`/post/detail?id=${item.id}`">
          <div v-if="item.images.length >= 3" class="list">
            <h4>{{ item.title }}</h4>
            <p>
              <a href="javascript:;">{{ item.summary }} </a>
            </p>
            <div class="img">
              <a href="javascript:;" v-for="(v, i) in item.images" :key="i">
                <img :src="v" alt="" />
              </a>
            </div>
            <div class="dibu">
              <div class="left">
                <span class="el-icon-location-outline"></span>
                <span> {{ item.cityName }}</span>
                <div class="logo">
                  <span>by</span
                  ><img
                    :src="
                      'http://157.122.54.189:9095' + item.account.defaultAvatar
                    "
                    alt=""
                  />
                  <span class="nickname">{{ item.account.nickname }}</span>
                  <span class="el-icon-view"></span>
                  <span>{{ item.watch }}</span>
                </div>
                <span></span>
              </div>
              <div class="right">{{ item.like }} 赞</div>
            </div>
          </div>
        </nuxt-link>
        <!-- 有一张图片时显示 -->
        <nuxt-link :to="`/post/detail?id=${item.id}`">
          <div
            class="mokuai"
            v-if="item.images.length == 1 || item.images.length == 2"
          >
            <div class="mokuai_left">
              <a href="javascript:;" v-for="(v, i) in item.images" :key="i">
                <img :src="v" alt="" />
              </a>
            </div>
            <div class="mokuai_right">
              <h4>{{ item.title }}</h4>
              <p>
                {{ item.summary }}
              </p>
              <div class="dibu">
                <div class="left">
                  <span class="el-icon-location-outline"></span>
                  <span> {{ item.cityName }}</span>
                  <div class="logo">
                    <span>by</span
                    ><img
                      :src="
                        'http://157.122.54.189:9095' +
                        item.account.defaultAvatar
                      "
                    />
                    <span class="nickname">{{ item.account.nickname }}</span>
                    <span class="el-icon-view"></span>
                    <span>{{ item.watch }}</span>
                  </div>
                  <span></span>
                </div>
                <div class="right">{{ item.like }} 赞</div>
              </div>
            </div>
          </div>
        </nuxt-link>
        <!-- 没有图片显示 -->
        <nuxt-link :to="`/post/detail?id=${item.id}`">
          <div class="noImages" v-if="item.images.length == 0">
            <h4>{{ item.title }}</h4>
            <p>{{ item.summary }}</p>
            <div class="dibu">
              <div class="left">
                <span class="el-icon-location-outline"></span>
                <span> {{ item.cityName }}</span>
                <div class="logo">
                  <span>by</span
                  ><img
                    :src="
                      'http://157.122.54.189:9095' + item.account.defaultAvatar
                    "
                    alt=""
                  />
                  <span class="nickname">{{ item.account.nickname }}</span>
                  <span class="el-icon-view"></span>
                  <span>{{ item.watch }}</span>
                </div>
                <span></span>
              </div>
              <div class="right">{{ item.like }} 赞</div>
            </div>
          </div>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/utils/EventBus";
export default {
  props: ["data"],
  data() {
    return {
      input: "", // 绑定input 框输入的值
      start: 0, // URL 的参数
      limit: 3, // URL 的参数
    };
  },
  mounted() {
    // 使用事件总线传值 接收使用 $on 监听传过来的数据 一个回调函数接数据
    bus.$on("click", (v) => {
      /**
       * 使用事件总线传值 接收使用 $on 使用一个回调函数监听传过来的数据，
       * 把当前点击的城市名赋值到input 输入框
       * 使用replace 的aip 方法去掉一个市字
       */
      this.input = v.city.replace("市", "");
    });
  },
  methods: {
    recommend(value) {
      // 点击推荐的时候把点击到的值放到input 输入框中
      this.input = value;
      // 添加到url 的参数上
      this.$router.push({
        path: `/post?start=${this.start}&limit=${this.limit}&city=` + value,
      });
      // 发送请求
      this.$axios({
        url: "/posts?city=" + value,
      }).then((res) => {
        this.$emit("cityData", res.data);
      });
    },
    // 点击input框中的搜索触发
    citySeek() {
      // 如果输入框不为空就发送请求
      if (this.input) {
        // 触发input 框的时候把值传递给url 上
        this.$router.push({
          path:
            `/post?start=${this.start}&limit=${this.limit}&city=` + this.input,
        });
        this.$axios({
          url: "/posts?city=" + this.input,
        }).then((res) => {
          // 把数据传给父组件渲染数据
          this.$emit("cityData", res.data);
        });
      } else {
        this.$message.error("请输入你要搜索的城市");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.nickname {
  color: orange;
}
/deep/.el-input__inner {
  border: none;
  height: 32px;
}
.dis {
  height: 40px;
  border: 3px solid orange;
}
i {
  font-size: 18px;
  padding: 0 10px;
  color: orange;
  font-weight: 700;
}
.tuijian {
  margin: 10px 0;
  font-size: 14px;
  display: flex;
  span {
    margin: 0 5px;
  }
}

.gonglue {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 9px;

  h3 {
    color: orange;
    margin-bottom: -10px;
    line-height: 50px;
    font-weight: 400;
    border-bottom: 2px solid orange;
  }
}
.list {
  height: 350px;
  border-bottom: 1px solid #ccc;
  h4 {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
  }
  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .img {
    display: flex;
    height: 150px;
    a {
      display: block;
      flex: 1;
      display: flex;
      height: 150px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.dibu {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  height: 52px;
  align-items: center;
  .left {
    display: flex;
    line-height: 54px;
    span {
      line-height: 52px;
      margin-right: 10px;
    }

    img {
      height: 16px;
      width: 16px;
    }
  }
  .right {
    color: orange;
  }
}

.mokuai {
  display: flex;
  height: 150px;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  .mokuai_left {
    width: 250px;
    height: 150px;
    margin-right: 10px;
    img {
      width: 50%;
      height: 100%;
    }
  }
  .mokuai_right {
    flex: 1;
    h4 {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }
    p {
      height: 70px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
}
.noImages {
  height: 130px;
  width: 100%;
  padding: 10px 0;
  margin-top: 5px;
  border-bottom: 1px solid #ccc;
  h4 {
    font-size: 16px;
    color: #666;
    height: 30px;
    line-height: 30px;
  }
  p {
    color: #ccc;
    font-size: 14px;
    height: 60px;
  }
}
</style>